<template>
  <div class="content1">
    <div ref="myChart1" class="chart"></div>
    <div ref="myChart2" class="chart"></div>
    <div ref="myChart3" class="chart"></div>
    <div ref="myChart4" class="chart"></div>
    <div ref="myChart5" class="chart"></div>
    <div ref="myChart6" class="chart"></div>
    <div ref="myChart7" class="chart"></div>
    <div ref="myChart8" class="chart"></div>
    <div ref="myChart9" class="chart"></div>
    <div ref="myChart10" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
//console.log(echarts);
export default {
  data() {
    return {
      myChart: null,

      y1: 0,
      n1: 0,
      y2: 0,
      n2: 0,
      y3: 0,
      n3: 0,
      y4: 0,
      n4: 0,
      y5: 0,
      n5: 0,
      y6: 0,
      n6: 0,
      y7: 0,
      n7: 0,
      y8: 0,
      n8: 0,
      y9: 0,
      n9: 0,
      y10: 0,
      n10: 0,
    };
  },
  mounted() {
    this.getData();
    // this.initChart();
  },
  methods: {
    async getData() {
      let res1 = await this.$http.shanghaiApi.roomSale();
      this.y1 = res1.data.yes1;
      this.n1 = res1.data.no1;

      let res2 = await this.$http.beijingApi.roomSale();
      this.y2 = res2.data.yes1;
      this.n2 = res2.data.no1;

      let res3 = await this.$http.shenzhenApi.roomSale();
      this.y3 = res3.data.yes1;
      this.n3 = res3.data.no1;

      let res4 = await this.$http.guangzhouApi.roomSale();
      this.y4 = res4.data.yes1;
      this.n4 = res4.data.no1;

      let res5 = await this.$http.chongqingApi.roomSale();
      this.y5 = res5.data.yes1;
      this.n5 = res5.data.no1;

      let res6 = await this.$http.hangzhouApi.roomSale();
      this.y6 = res6.data.yes1;
      this.n6 = res6.data.no1;

      let res7 = await this.$http.chengduApi.roomSale();
      this.y7 = res7.data.yes1;
      this.n7 = res7.data.no1;

      let res8 = await this.$http.nanjingApi.roomSale();
      this.y8 = res8.data.yes1;
      this.n8 = res8.data.no1;

      let res9 = await this.$http.wuhanApi.roomSale();
      this.y9 = res9.data.yes1;
      this.n9 = res9.data.no1;

      let res10 = await this.$http.suzhouApi.roomSale();
      this.y10 = res10.data.yes1;
      this.n10 = res10.data.no1;

      this.initChart();
    },
    initChart() {
      let option1 = {
        title: {
          text: "上海分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y1, name: "已经售出" },
              { value: this.n1, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let option2 = {
        title: {
          text: "北京分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y2, name: "已经售出" },
              { value: this.n2, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let option3 = {
        title: {
          text: "深圳分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y3, name: "已经售出" },
              { value: this.n3, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let option4 = {
        title: {
          text: "广州分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y4, name: "已经售出" },
              { value: this.n4, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let option5 = {
        title: {
          text: "重庆分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y5, name: "已经售出" },
              { value: this.n5, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let option6 = {
        title: {
          text: "杭州分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y6, name: "已经售出" },
              { value: this.n6, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let option7 = {
        title: {
          text: "成都分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y7, name: "已经售出" },
              { value: this.n7, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option8 = {
        title: {
          text: "南京分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y8, name: "已经售出" },
              { value: this.n8, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option9 = {
        title: {
          text: "武汉分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y9, name: "已经售出" },
              { value: this.n9, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option10 = {
        title: {
          text: "苏州分店",
          subtext: "房间情况",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.y10, name: "已经售出" },
              { value: this.n10, name: "未售出" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      this.myChart = echarts.init(this.$refs.myChart1);
      this.myChart.setOption(option1);
      this.myChart = echarts.init(this.$refs.myChart2);
      this.myChart.setOption(option2);
      this.myChart = echarts.init(this.$refs.myChart3);
      this.myChart.setOption(option3);
      this.myChart = echarts.init(this.$refs.myChart4);
      this.myChart.setOption(option4);
      this.myChart = echarts.init(this.$refs.myChart5);
      this.myChart.setOption(option5);
      this.myChart = echarts.init(this.$refs.myChart6);
      this.myChart.setOption(option6);
      this.myChart = echarts.init(this.$refs.myChart7);
      this.myChart.setOption(option7);
      this.myChart = echarts.init(this.$refs.myChart8);
      this.myChart.setOption(option8);
      this.myChart = echarts.init(this.$refs.myChart9);
      this.myChart.setOption(option9);
      this.myChart = echarts.init(this.$refs.myChart10);
      this.myChart.setOption(option10);
    },
  },
};
</script>

<style lang="scss" scoped>
.content1 {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.chart {
  width: 400px;
  height: 200px;
}
</style>